import React, { PureComponent } from 'react';
import styles from '../styles.less';
import blueBg from '../../../../../../assets/busi/performanceAnalysis/profitOverview/blueBg.png';
import blueBg2 from '../../../../../../assets/busi/performanceAnalysis/profitOverview/blueBg2.png';
import redBg from '../../../../../../assets/busi/performanceAnalysis/profitOverview/redBg.png';
import redBg2 from '../../../../../../assets/busi/performanceAnalysis/profitOverview/redBg2.png';
export default class StatisticsCard extends PureComponent {
  render() {
    const { icon, title, number, unit = '', colorType } = this.props;
    let backgroundBg = blueBg;
    if (colorType == 'red') {
      if (unit) {
        backgroundBg = redBg2;
      } else {
        backgroundBg = redBg;
      }
    } else {
      if (unit) {
        backgroundBg = blueBg2;
      } else {
        backgroundBg = blueBg;
      }
    }

    return (
      <div className={styles.statisticscard + ' ' + (unit ? styles.statisticscardUnit : '')} style={{ backgroundImage: `url(${backgroundBg})` }}>
        <div className={styles.leftStatistics}>
          <div className={styles.title}>{title}</div>
          <div className={styles.amount}>{number + ' ' + unit}</div>
        </div>
        <div className={styles.rightImage}>
          <img src={icon} />
        </div>
      </div>
    );
  }
}
